{# @prop value integer The progress value between 0 and 100, default to `0` #}
{%- props value = 0 -%}
<div
    class="{{ 'relative h-4 w-full overflow-hidden rounded-full bg-secondary ' ~ attributes.render('class')|tailwind_merge }}"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="{{ value }}"
    {{ attributes }}
>
    <div class="h-full w-full flex-1 bg-primary transition-all" style="transform: translateX(-{{ 100 - value }}%)"></div>
</div>
